<!--
 描述: 柱饼组合联动
 作者: Jack Chen
 日期: 2020-04-30
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">四级网格体系</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_bp"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "cakeLinkage",
        data() {
            return {
                option: null,
                dataMap: {},

            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart() {
                let myChart = echarts.init(document.getElementById('chart_bp'));

                this.option = {
                    calculable: true,
                    series: [{
                        type: 'funnel',
                        left: '7%',
                        top: 20,
                        bottom: 40,
                        width: '80%',
                        maxSize: '100%',
                        gap: 4, // 三角形之间的间距
                        label: {
                            show: true,
                            position: 'inside',
                        },
                        sort: 'ascending',
                        label: {
                            normal: {
                                position: 'inside',
                                padding: [0, 0, 1, 0],
                                formatter: function (params) {
                                    var text = '';
                                    switch (params.name) {
                                        case '一级网格':
                                            text = '{a|1}{b|个}\n{c|一级网格}'
                                            break;
                                        case '二级网格':
                                            text = '{a|12}{b|个}\n{c|二级网格}'
                                            break;
                                        case '三级网格':
                                            text = '{a|228}{b|个}\n{c|三级网格}'
                                            break;
                                        case '四级网格':
                                            text = '{a|1160}{b|个}\n{c|四级网格}'
                                            break;
                                    }
                                    return text
                                },
                                rich: {
                                    a: {
                                        color: '#fdde2c',
                                        fontSize: '20',
                                        align: 'center',
                                        border: 0
                                    },
                                    b: {
                                        fontSize: '10',
                                        color: '#fff',
                                        border: 0
                                    },
                                    c: {
                                        color: '#fff',
                                        fontSize: '14',
                                        align: 'center',
                                        border: 0
                                    },
                                    d: {
                                        color: '#fff',
                                        fontSize: '14',
                                        align: 'center',
                                        border: 0
                                    },
                                }
                            },
                        },
                        data: [
                            {
                                value: 30,
                                name: '一级网格',
                                itemStyle: {
                                    color: '#c4a956'
                                }
                            },
                            {
                                value: 60,
                                name: '二级网格',
                                itemStyle: {
                                    color: '#4E6EDF'
                                }
                            },
                            {
                                value: 90,
                                name: '三级网格',
                                itemStyle: {
                                    color: '#6b9c9e'
                                }
                            }
                            ,
                            {
                                value: 120,
                                name: '四级网格',
                                itemStyle: {
                                    color: '#479e7d'
                                }
                            }
                        ]
                    }]
                };

                myChart.setOption(this.option, true);

                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        },
        beforeDestroy() {

        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 44px;
        width: 435px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>
